<template>
<div class="algobox">
  <header-bar>
      <span slot="major-bar" @click="toAlgo">{{main}}</span>
      <span slot="next-bar"> > {{title}}</span>
  </header-bar>
  <div id="algo-detail">
    <div class="algo-detail-box">
    <main-detail  :title1='title' :company1='company' :date1="date" :message1='message' :content1='content'>
    </main-detail>
    <div class="detail-context" slot="detail-context">
        <algo-detail-item :productionDetails1='productionDetails' :developerDocument1='developerDocument'/>
      </div>
      <div class="liked"><Button type="text" @click.once="like"><img src="~assets/images/点赞@1x.png" alt=""><span>{{liked}}</span></Button></div>
    </div>
  </div>
  </div>
</template>
<script>
import {getAlgoDataById} from 'api/algorithm.js'
import {AlgoLike} from 'api/algorithm.js'
import HeaderBar from '../../components/common/detail/HeaderBar.vue';
import MainDetail from '../../components/content/detail/MainDetail.vue';
import AlgoDetailItem from '../../components/content/detail/AlgoDetailItem.vue';
export default {
  name:'AlgoDetail',
  data(){
    return {
      id:null,
      title:'',
      main:'算法广场',
      date:'',
      company:'',
      content:'',
      message:'立即咨询',
      productionDetails:'',
      developerDocument:'',
      liked:0
    }
  },
  components:{
    HeaderBar,
    MainDetail,
    AlgoDetailItem
  },
  created(){
    this.id=this.$route.params.id;
    this.algodata();
  },
  methods:{
    algodata(){
      let data={};
      data.id=this.id;
      getAlgoDataById('/api/model/listModelById',data)
      .then(res=>{
        this.title=res.data.title;
        this.date=res.data.date;
        this.company=res.data.company;
        this.content=res.data.content;
        this.developerDocument=res.data.developerDocument;
        this.productionDetails=res.data.productionDetails;
        this.liked=res.data.liked;
      })
      .catch(err=>{
        this.$Notice.error({
        title:'请求失败',
        duration:5})
      })
    },
    like(){
      if(sessionStorage.getItem('mytoken')){
        let data={};
        data.modelId=this.id;
        data.userId=sessionStorage.getItem('id');
        AlgoLike('/api/user/like',data)
        .then(res=>{
          this.liked++;
        this.$Notice.success({
        title:'成功点赞',
        duration:5})
        })
        .catch(err=>{
        this.$Notice.error({
        title:'点赞失败',
        duration:5})
        })
      }else{
        this.$Notice.warning({
        title:'未登录',
        duration:5})    
      }
    },
    toAlgo(){
      this.$router.push('/algorithm')
    }
  }
}
</script>
<style>
.algobox{
  width: 60%;
  margin: 0 auto;
}
.algobox .major-bar{
  cursor: pointer;
}
.algobox .ivu-btn-text{
  border-color: #8c30f5;
  color: #8c30f5;
}
.algobox .liked{
  padding: 2.75% 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.algobox .liked img{
  width: .75rem;
  height: .75rem;
}
.algobox .liked span{
  margin: 0 4px;
}
.ivu-btn,
.ivu-btn:active,
.ivu-btn:focus,
.ivu-btn-text,
.ivu-btn-text:active,
.ivu-btn-text:focus{
  border-color: #8c30f5;
} 
#algo-detail{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 2% 0;
  color: #000;
}
#algo-detail .algo-detail-box{
width: 100%;
  padding: 1.5625rem;
  background-color: #fff;
  border-radius: 1.25rem;
}
</style>